import {Component, Input, OnInit, ElementRef, AfterViewInit, OnChanges} from '@angular/core';
import {ConfigService} from '@kylin/config';

interface Image {
    title: string;
    path: string;
}

@Component({
    selector: 'kylin-images',
    templateUrl: './images.component.html',
    styleUrls: ['./images.component.less']
})

// 使用 light gallery 图片库
export class ImagesComponent implements OnInit, AfterViewInit, OnChanges {

    @Input() eleId: string;
    @Input() imgHostname: string;
    @Input() images: Array<String>;
    idPrefix = 'kylin_images' + new Date().getTime();
    altMsg: string;

    constructor(private elementRef: ElementRef, private config: ConfigService) {
        this.imgHostname = config.imgHostname;
    }

    ngOnInit() {

    }

    ngOnChanges(data) {
        if (data.images && data.images.currentValue.length) {
            this.altMsg = '查看图片详情';
        } else {
            this.altMsg = '无图片记录';
        }
    }

    openLightGallery() {
        if (this.images.length === 0) {
            return;
        }
        const firstImg = this.elementRef.nativeElement.querySelector('.img-item');
        firstImg.click();
    }

    private lightGalleryInit() {
        lightGallery(document.getElementById(this.idPrefix + this.eleId), {
            thumbnail: true
        });
    }

    ngAfterViewInit() {
        setTimeout(() => {
            this.lightGalleryInit();
        }, 0);
    }

}
